<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px" style="text-align: right;">
            <el-form-item label="年度" prop="year">
                <el-date-picker v-model="queryParams.year" type="year" placeholder="选择年" value-format="yyyy" @change="getDataList"></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-s-claim" size="mini" @click="calcData">社保核算</el-button>
            </el-form-item>
        </el-form>

        <table-card style="height: calc(100vh - 180px);overflow: scroll;">
            <el-card class="top15" v-for="month in dataList">
                <el-row :gutter="20">
                    <el-col :span="4">
                        <div style="display: flex;justify-content: center; align-items: center;">
                            <img src="@/assets/images/hrm/date.png" style="width:30px;height: 30px;">
                            <div style="line-height: 40px;padding-left: 20px;font-size: 14px;font-weight: 900;">
                                {{month.year}}年{{month.month}}月
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="2">
                        <div>
                            <el-statistic group-separator="," :precision="2" :value="month.ct" title="参保人数"></el-statistic>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div>
                            <el-statistic group-separator="," :precision="2" :value="month.comSocinsAmt" title="公司缴纳社保"></el-statistic>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div>
                            <el-statistic group-separator="," :precision="2" :value="month.staffSocinsAmt" title="个人缴纳社保"></el-statistic>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div>
                            <el-statistic group-separator="," :precision="2" :value="month.comFundAmt" title="公司缴纳公积金"></el-statistic>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div>
                            <el-statistic group-separator="," :precision="2" :value="month.staffFundAmt" title="个人缴纳公积金"></el-statistic>
                        </div>
                    </el-col>
                    <el-col :span="2">
                        <div style="line-height: 40px">
                            <el-button size="mini" type="text" icon="el-icon-s-grid" @click="toDetail(month)">
                                查看详情
                            </el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-card>
        </table-card>

        <el-dialog :visible.sync="showInitData" title="初始化日期" width="600px" append-to-body>
            <div style="font-size: 14px;padding-bottom: 20px;">
                初始化年月：初始化后将按月进行核算，请设置初始化月份，点击确定按钮后进行核算。
            </div>
            <el-form :model="form" ref="form" size="small" :rules="rules" label-width="80px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="年份" prop="year">
                            <el-date-picker v-model="form.year" type="year" placeholder="选择年" value-format="yyyy"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="月份" prop="month">
                            <el-select v-model="form.month" placeholder="请选择月份">
                                <el-option key="01" label="一月" value="01"></el-option>
                                <el-option key="02" label="二月" value="02"></el-option>
                                <el-option key="03" label="三月" value="03"></el-option>
                                <el-option key="04" label="四月" value="04"></el-option>
                                <el-option key="05" label="五月" value="05"></el-option>
                                <el-option key="06" label="六月" value="06"></el-option>
                                <el-option key="07" label="七月" value="07"></el-option>
                                <el-option key="08" label="八月" value="08"></el-option>
                                <el-option key="09" label="九月" value="09"></el-option>
                                <el-option key="10" label="十月" value="10"></el-option>
                                <el-option key="11" label="十一月" value="11"></el-option>
                                <el-option key="12" label="十二月" value="12"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="showInitData = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {getStatistics,getMaxMonth,calcData} from "@/api/hrm/socialInsncData";
import {delType} from "@/api/system/dict/type";

export default {
    name: "SocialInsncData",
    data() {
        return {
            dataList:[],
            queryParams:{
                year:new Date().getFullYear()+""
            },
            year:"",
            month:"",
            showInitData:false,
            form:{},
            // 表单校验
            rules: {
                year: [
                    {required: true, message: "年份不能为空", trigger: "blur"}
                ],
                month: [
                    {required: true, message: "月份不能为空", trigger: "blur"}
                ]
            },
        };
    },
    created() {
        this.getDataList();
    },
    methods: {
        getDataList(){
            getStatistics(this.queryParams).then(res=>{
                if(res.code == 200){
                    this.dataList = res.data;
                }
            })
        },
        toDetail(month){
            this.$router.push({path: "/hrm/socialInsncMng/insncData/detail/"+month.year+"/"+month.month})
        },
        calcData(){
            //查询数量
            getMaxMonth().then(res=>{
                //需要初始化
                if(res.data=='noData'){
                    this.showInitData = true;
                }else{
                    let arr = res.data.split("-");
                    this.form.year = arr[0];
                    this.form.month = arr[1];
                    this.$modal.confirm('是否生成  '+this.form.year+'年'+this.form.month+'月  的社保缴纳信息？？').then( () =>{
                        //生成社保缴纳信息
                        this.doSubmit();
                    })
                }
            })
        },
        submitForm(){
            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.doSubmit();
                }
            });
        },
        doSubmit(){
            calcData(this.form).then(res=>{
                if(200==res.code){
                    this.$modal.msgSuccess("生成成功");
                    this.getDataList();
                }
            })
        }
    }
};
</script>
<style lang="scss" scoped>

</style>
